<template>
    <div class="datatable">
        <div class="tabletitle">
            <span>{{keyname}}</span>
            <span class="tabletdr">{{valname}}</span>
        </div>
        <div class="tablebody">
            <div class="tabletr" v-for="(item,index) in tabledata" :key="index" :class="{light:(index%2===1)}">
                <span>{{item.key}}</span>
                <span class="tabletdr">{{item.val}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "datatable",
        props:['keyname','valname','tabledata'],
        data(){
            return {
                /*tabledata:[
                    {key:'渠道一',val:'89%'},
                    {key:'渠道一',val:'89%'},
                    {key:'渠道一',val:'89%'},
                    {key:'渠道一',val:'89%'},
                    {key:'其它',val:'89%'}
                ]*/
            }
        }
    }
</script>

<style lang="less" scoped>
.datatable{
    padding: 20px 12px;
    height: calc(100% - 40px);
    display: flex;
    color: #fff;
    flex-direction: column;

    .tabletitle{
        height: 10px;
        flex: 0.5 0 auto;
        display: flex;
        background-color: #2755cd;
        &>span{
            width: 0;
            flex: 1 1 auto;
            padding-left: 10%;
            display: flex;
            align-items: center;
            font-size: 18px;
        }
        &>.tabletdr{
            padding-left: 14%;
        }
    }
    .tablebody{
        height: 0;
        flex: 5 1 auto;
        display: flex;
        flex-direction: column;
        .tabletr{
            flex: 1 0 auto;
            height: 0;
            display: flex;
            &>span{
                width: 0;
                flex: 1 1 auto;
                padding-left: 14%;
                display: flex;
                align-items: center;
                font-size: 18px;
            }
            &>.tabletdr{
                padding-left: 18%;
            }
            &.light{
                background-color: rgba(184,211,254,0.1);
            }
        }
    }
}
</style>
